<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="search_name" clearable placeholder="请输入权限名称" style="width: 200px;" class="filter-item" />
      <el-button style="margin-left: 20px" class="filter-item" type="primary" icon="el-icon-search" @click="getPermission">
        查询
      </el-button>
      <el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleAddPermission">添加权限</el-button>
    </div>
    <el-table :data="PermissionList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="权限Id">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="权限名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="权限路由">
        <template slot-scope="scope">
          {{ scope.row.route }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="权限简介">
        <template slot-scope="scope">
          {{ scope.row.info }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="父级权限">
        <template slot-scope="scope">
          {{ scope.row.p_name||'无' }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="菜单标题">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="菜单图标">
        <template slot-scope="scope">
          {{ scope.row.icon }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="菜单地址">
        <template slot-scope="scope">
          {{ scope.row.menu_path }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="菜单名称">
        <template slot-scope="scope">
          {{ scope.row.menu_name }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="渲染地址">
        <template slot-scope="scope">
          {{ scope.row.component }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否展示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_show"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
            @change="checkShow(scope)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否有效">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            :active-value="0"
            :inactive-value="1"
            @change="checkStatus(scope)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑权限':'新增权限'">
      <el-form :model="PermissionAdd" label-width="80px" label-position="left">
        <el-form-item label="权限名称">
          <el-input v-model="PermissionAdd.name" placeholder="输入权限名称" />
        </el-form-item>
        <el-form-item label="权限简介">
          <el-input
            v-model="PermissionAdd.info"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入权限简介"
          />
        </el-form-item>
        <el-form-item label="权限路由">
          <el-input v-model="PermissionAdd.route" placeholder="输入权限路由" />
        </el-form-item>
        <el-form-item label="菜单标题">
          <el-input v-model="PermissionAdd.title" placeholder="输入菜单标题" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="PermissionAdd.icon" placeholder="输入菜单图标" />
        </el-form-item>
        <el-form-item label="菜单地址">
          <el-input v-model="PermissionAdd.menu_path" placeholder="输入菜单地址" />
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="PermissionAdd.menu_name" placeholder="输入菜单名称" />
        </el-form-item>
        <el-form-item label="渲染地址">
          <el-input v-model="PermissionAdd.component" placeholder="输入菜单渲染地址" />
        </el-form-item>
        <el-form-item label="是否展示">
          <el-switch
            v-model="PermissionAdd.is_show"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="展示"
            inactive-text="不展示"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="父级权限">
          <el-select v-model="PermissionAdd.pid" filterable clearable placeholder="请选择父级权限">
            <el-option
              v-for="item in PermissionOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmPermission">确定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      style="float: right;margin-top: 20px"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total"
      :hide-on-single-page=true
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { addPermission, getPermission, updatePermission, deletePermission, CheckPermissionShow, CheckPermissionStatus, getPermissionOption } from '@/api/auth'
import { deepClone } from '@/utils'

export default {
  data() {
    return {
      total: 0,
      page: 0,
      limit: 0,
      PermissionAdd: {
        id: undefined,
        name: '',
        info: '',
        pid: '',
        route: '',
        is_show: false,
        p_name: '',
        title: '',
        icon: '',
        menu_path: '',
        menu_name: '',
        component: ''
      },
      PermissionList: [],
      PermissionOption: [],
      dialogVisible: false,
      dialogType: 'new',
      search_name: ''
    }
  },
  computed: {
  },
  created() {
    this.getPermission()
    this.getPermissionOption()
  },
  methods: {
    async getPermission() {
      const res = await getPermission(this.search_name, this.page, this.limit)
      // console.log(res.data.res)
      this.PermissionList = res.data.res
      this.total = res.data.fenye.total
      // console.log(res.data.fenye)
      this.limit = parseInt(res.data.fenye.limit)
    },
    async getPermissionOption() {
      const res = await getPermissionOption()
      this.PermissionOption = res.data
    },
    async handleCurrentChange(e) {
      const res = await getPermission(this.search_name, e, this.limit)
      this.PermissionList = res.data.res
      this.total = res.data.fenye.total
      this.limit = parseInt(res.data.fenye.limit)
    },
    async checkShow(e) {
      const res = await CheckPermissionShow(e.row.is_show, e.row.id)
      switch (res.code) {
        case -1:
          this.$message({
            type: 'error',
            message: res.msg || 'Error'
          })
          break
        case 200:
          this.$message({
            type: 'success',
            message: res.msg || 'Success'
          })
          break
      }
    },
    handleAddPermission() {
      this.PermissionAdd = {}
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.PermissionAdd = deepClone(scope.row)
      this.$nextTick(() => {
      })
    },
    async checkStatus(e) {
      const res = await CheckPermissionStatus(e.row.status, e.row.id)
      switch (res.code) {
        case -1:
          this.$message({
            type: 'error',
            message: res.msg || 'Error'
          })
          break
        case 200:
          this.$message({
            type: 'success',
            message: res.msg || 'Success'
          })
          break
      }
    },
    handleDelete({ row }) {
      this.$confirm('是否确定要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deletePermission(row.id)
          switch (res.code) {
            case -1:
              this.$message({
                type: 'error',
                message: res.msg || 'Error'
              })
              break
            case 200:
              this.$message({
                type: 'success',
                message: res.msg || 'Success'
              })
              location.reload()
              break
          }
        })
        .catch()
    },
    async confirmPermission() {
      const isEdit = this.dialogType === 'edit'
      if (isEdit) {
        const res = await updatePermission(this.PermissionAdd)
        switch (res.code) {
          case -1:
            this.$message({
              type: 'error',
              message: res.msg || 'Error'
            })
            break
          case 200:
            this.$message({
              type: 'success',
              message: res.msg || 'Success'
            })
            this.dialogVisible = false
            location.reload()
            break
        }
      } else {
        const res = await addPermission(this.PermissionAdd)
        switch (res.code) {
          case -1:
            this.$message({
              type: 'error',
              message: res.msg || 'Error'
            })
            break
          case 200:
            this.$message({
              type: 'success',
              message: res.msg || 'Success'
            })
            this.dialogVisible = false
            location.reload()
            break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
